<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 250px;
        height: 200px;
        border: 2px solid blue;
      }
      .contain {
        /* object-contain 保持宽高比 填充在内容框中 */
        object-fit: contain;
      }
      .cover {
        /* cover 保持宽高比，正好填充满整个内容框 */
        object-fit: cover;
      }
      .fill {
        /* fill 被替换的内容正好填充元素的内容框。内容可能会被拉伸或压缩变形  */
        object-fit: fill;
      }
      .none {
        /* none 被替换的内容将保持其原有的尺寸 */
        object-fit: none;
      }
      .scale-down {
        /* scale-down 表示被替换内容尺寸为 none和 contain中最小的那一个 */
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <img src="/src/img/flower.jpg" alt="" class="contain" />
    <img src="/src/img/flower.jpg" alt="" class="cover" />
    <img src="/src/img/flower.jpg" alt="" class="fill" />
    <img src="/src/img/flower.jpg" alt="" class="none" />
    <img src="/src/img/fish.ico" alt="" class="scale-down" />
    <img src="/src/img/fish.ico" alt="" class="contain" />
  </body>
</html>
